<template>
  <div class="register-page">
    <div class="register-page">
      <van-nav-bar title="账号注册" left-arrow @click-left="onClickLeft" />
      <div class="register-shuru">
        <van-form @submit="onSubmit">
          <van-field
            class="register-shuru-zhanghao"
            v-model="username"
            name="username"
            placeholder="请输入账号"
            :rules="[
              { required: true, message: '请填写用户名' },
              { pattern: /^\w{5,}$/, message: '用户名至少包含5个字符' },
            ]"
          />
          <van-field
            class="register-shuru-mima"
            v-model="password"
            type="password"
            name="password"
            placeholder="请输入密码"
            :rules="[
              { required: true, message: '请填写密码' },
              { pattern: /^\w{6,}$/, message: '密码至少包含6个字符' },
            ]"
          />
          <div style="margin: 16px">
            <van-button block type="info" native-type="submit">注册</van-button>
            <!-- 跳转路由 -->
            <router-link class="link" to="/login">回到登录页面</router-link>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
// import { Toast } from "vant";
// import request from "@/utils/request";
import { register } from "@/API/user";
export default {
  name: "register-page",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    //点击跳转回去
    onClickLeft() {
      this.$router.push("/");
    },
    async onSubmit(values) {
      console.log("submit", values);
      const res = await register(values);
      console.log(res);
      if (res.data.status === 200) {
        this.$toast.success("注册成功");
        this.$router.push("/login");
      } else {
        this.$toast(res.data.description);
      }
      this.username = "";
      this.password = "";
    },
  },
};
</script>

<style lang="less" scoped>
.register-shuru {
  margin-top: 30px;
}
.register-shuru-zhanghao {
  margin-bottom: 20px;
}
.register-shuru-mima {
  margin-bottom: 30px;
}
.link {
  margin-top: 30px;
  color: black;
  font-size: 12px;
  padding-right: 20px;
  float: left;
}
</style>
